<template>
	<div class="containerAll" v-show="page">
		<div class="header">
			<div class="hasFriend">
				<div class="rules" @click="modalLimit">规则</div>
				<img class="noFriend" :src="imgs[0]" />
				<div class="contacts flex flex-c flex-item-center">
					<div class="title-text flex flex-item-center">
						人脉奖：邀友开通会员得100元
					</div>
					<div class="vouchers flex flex-item-center flex-c">
						<div class="flex flex-item-between flex-r title flex-item-v-center">
							<div class="amount"><span>¥</span>100</div>
							<div class="flex flex-c prize flex-item-v-center">
								<div>人脉奖</div>
								<div>可提现</div>
							</div>
						</div>
						<div class="instructions flex flex-item-center">每邀请一名好友开通会员得100元账户现金</div>
					</div>

				</div>
				<div class="commission flex flex-c flex-item-center">
					<div class="title-text flex flex-item-center">
						提成奖：邀友得10元
					</div>
					<div class="vouchers flex flex-item-center flex-c">
						<div class="flex flex-item-between flex-r title two flex-item-v-center">
							<div class="amount"><span>¥</span>10</div>
							<div class="flex flex-c prize flex-item-v-center">
								<div>提成奖</div>
								<div>可提现</div>
							</div>
						</div>
						<div class="instructions flex flex-item-center">好友邀请好友开通会员,可获得10元账户现金</div>
					</div>

				</div>
				<div class="myInvite" v-if="friendList.length">
					<p class="myInviteHeader">我的邀请</p>
					<div class="friendList">
						<div class="friendItem flex flex-r flex-item-between flex-item-v-center" v-for="(item,index) in friendList">
							<img :src="item.wxHeadImg" />
							<div class="name flex flex-c ">
								<div>{{item.wxName}}</div>
								<div v-if='item.inviterAccountName'  style='color:#bcbcbc;font-size: .20rem;'>{{item.inviterAccountName}}推荐</div>
							</div>
							<span class="phone">{{item.userAccountName}}</span>
						</div>
						<p class="myInviteFooter" v-if="tomoreno" @click="tomore"><span>加载更多...</span></p>
						<p class="myInviteFooter" v-else><span>没有更多了哦</span></p>
					</div>

				</div>
			</div>
		</div>
		<div class='modal' v-show="modal">
			<div class='show-msg msg-content'>
				<div class='flex flex-item-center close-modal' @click="closeModal">
					<img src='http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/close-gz.png' />
				</div>
				<div class='modal-content modal-2-content'>
					<div class='title-box'>活动规则</div>
					<template v-for="(item,index) in activitdata">
						<div v-if="item.title!='温馨提示'" class="msg-box flex flex-item-between" v-bind:class="[index==0 ? 'filst':'']">
							<span class="box-text"><span class="title-lable">{{item.title}}:</span> {{item.text}}</span>
						</div>
						<div v-else class="msg-box">
							<div class="title-lable">{{item.title}}:</div>
							<div class="box-text" v-for="(items,indexs) in item.texts">
								<template v-if="indexs<2">
									{{indexs+1}}. {{items}}
								</template>
								<template v-else>
									{{indexs+1}}. {{items}}
									<a href="tel:4006682866">400-6682-866</a>
								</template>

							</div>
						</div>

					</template>

				</div>
			</div>
		</div>
		<div class="invite" @click="share">立即邀请</div>

	</div>

</template>

<script>
	import http from '@/util/http'
	import Api from '@/util/api'
	import utils from "@/util/util"
	let timer;
	export default {
		data() {
			return {
				pageNum: 1,
				friendList: [],
				words: [],
				phone: '',
				ent: '',
				imgs: ['http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs-h5/bonus-banner.png'],
				page: false,
				isvip: false,
				modal: false,
				token: '',
				tomoreno: true,
				activitdata: [{
					title: '人脉奖',
					text: '您每邀请1位好友开通花卡会员，即可获得100元账户现金(可提现)。'
				}, {
					title: '提成奖',
					text: '通过您开通的花卡会员，如果该花卡会员用户邀请了其他用户开通会员，那么您同时也可以获得10元账户现金(可提现)。'
				}, {
					title: '举个例子',
					text: '如果您邀请了2位成为会员，而您邀请的2位会员邀请了6位成为会员，那么您的收入： 收入=2*100+5*10=260元 若好友持续邀请好友，则可获得更多人脉、提成奖励。 '
				}, {
					title: '温馨提示',
					texts: ['好友指通过您分享的专属链接进行开通花卡的用户；', '邀请好友，好友申请会员成功后，人脉奖账户现金发放至"我的-账户余额-可提现金额"中；', '活动最终解释权归上海市费果信息科技有限公司，如有疑问请拨打客服电话'],
					text: ''
				}],
			}
		},
		created() {
			this.token = utils.getUserToken() || this.token;
			window.loginCallBack = (token) => {
				this.token = token;
				token && this.GetInviterInf();
			}
			this.getText();
			this.GetInviterInf()
		},
		methods: {
			GetInviterInf() {
				http.post(Api.huakaGetInviterInfo, {}, {
						token: this.token
					},false)
					.then((d) => {
						if(d.data && d.code == 200) {
							var redata = d;
							this.phone = redata.phone;
							this.ent = redata.ent;
							this.isvip = true;
							this.queryHasKaInviteInfo();
						} else {
							this.page = true;
						}

					}).catch((e) => {
						this.page = true;
					})
			},
			modalLimit() {
				this.modal = true;
			},
			closeModal() {
				this.modal = false;
			},
			tomore() {
				if(this.friendList % this.pageNum == 0) {
					this.pageNum = this.pageNum++;
					this.queryHasKaInviteInfo();
				} else {
					this.queryHasKaInviteInfo();
				}
			},
			queryHasKaInviteInfo() {
				http.post(Api.huakaQueryHasKaInviteInfo, {
						"pageNum": this.pageNum,
						"order": "asc",
						"numPerPage": 30
					},{token:this.token},false)
					.then((res) => {
						this.page = true;
						if(res.code == 200) {
							if(res.data.page.recordList.length == 0) {
								this.pageNum = this.pageNum > 0 ? this.pageNum-- : this.pageNum;
								this.tomoreno = false;
								return;
							} else {
								if(res.data.page.recordList.length < 30) {
									this.tomoreno = false;
								}
							}
							if(this.pageNum > 1) {
								this.friendList = this.friendLis.concat(res.data.page.recordList);
							} else {
								this.friendList = res.data.page.recordList;
							}

						} else {
							this.pageNum = this.pageNum > 0 ? this.pageNum-- : this.pageNum;
						}
					}).catch((e) => {
						this.pageNum = this.pageNum > 0 ? this.pageNum-- : this.pageNum;
						this.page = true;
						this.toast('网络错误，请检查您的网络')
					})
			},
			getText() {
				http.post(Api.huakacopywriting,{},{token:this.token},false)
					.then((d) => {
						if(d.code == 200) {
							this.page = true;
						} else {
							this.page = true;
							mui.toast(d.message)
						}
					}).catch((e) => {
						this.toast('网络错误，请检查您的网络')
					})

			},
			share() {
				var self = this;
				var title = '花伴商城，会员享平价购物';
				var descr = '6565';
				var url1 = 'https://www.123.com';
				var image1 = 'http://zafgoos.oss-cn-shanghai.aliyuncs.com/hbplus/imgs/shareme.jpg';
				var pagePath = encodeURIComponent('/pages/vip/vip?channelCode=HUABAN&phone=' + self.phone + '&ent=' + self.ent);
				var userName = 'gh_951c6b3e8370'
				var str = 'huaban://socialShare?type=3&title=' + title + '&descr=' + descr + '&url=' + url1 + '&image=' + image1 + '&pagePath=' + pagePath + '&userName=' + userName
				window.location = str;
			}
		},
		filters: {

		}

	}
</script>

<style lang="less" rel="stylesheet/less" scoped="scoped">
	@import '~@/assets/less/main.less';
	@import './css/index.less';
</style>